<template>
	<!-- 卡片列表容器 -->
	<view class="" v-if="!noAvatar">
		<view class="flex justify-between">
			<view class="flex align-center margin-left-xs">

				<image class="cu-avatar round" :src="data?.avatar" mode="">
				</image>
				<view class="margin-left ">
					<view class="flex align-center">
						<text class="font-bold text-lg">
							{{data?.username}}</text>
						<text class="text-blue">
							<!-- 文集name -->
							【{{data?.titlename||'默认文集'}}】</text>
					</view>

					<text class="text-grey text-sm">
						<!-- form.createdAt -->
						{{data?.createdAt}}</text>
				</view>
			</view>
			<text class="cuIcon-unfold text-xl text-grey" @click=""> </text>
		</view>

		<!-- 话题（话题） -->
		<!-- <text class="cuIcon-title">仲夏夜的蝙蝠车</text> -->

	</view>

	<view class="card-list" :class="{'no-avatar':noAvatar}">
		<!-- 单个卡片 -->
		<view class="card-item">
			<!-- 卡片图片form.image -->
			<image v-if="data?.image" class="card-image" :src="data?.image" mode="widthFix"
				@click="handleTo(data.objectId)"></image>
			<!-- 卡片内容区 -->
			<view class="card-content">
				<!-- 详细内容 -->
				<view class="" @click="handleTo(data.objectId)">
					<text class="card-text">
						{{data?.content}}

					</text>
					<view class="flex justify-center">
						<text v-if="data?.author" class="card-author">
							- {{data?.author}} -
						</text>
					</view>
					<view class="card-tags">
						<text class="tag" v-if="data?.isOriginal">#原创</text>
						<text class="tag">#{{data?.category}}</text>
						<!-- 官方标签 -->
						<!-- <text class="tag" v-if="data?.isOriginal">一言「杂」</text> -->
					</view>
					<view class="underline margin-bottom" v-if="noAct">

					</view>
				</view>
				<!-- 互动按钮区 -->
				<view class="card-actions">
					<text class="action-item">
						<text class="iconfont icon-fuhao-biaoqian  margin-right-xs"
							:class="{active:actStatus.favorites}" @click="handleAction('favorites')"></text>
						<!-- form.favorites -->
						{{data?.favorites}}
					</text>
					<text class="action-item">
						<text class="iconfont icon-speechbubble text-grey margin-right-xs"
							@click="handleToComents(data.objectId)"></text>
						<!-- form.comments -->
						{{data.comments}}
					</text>
					<text class="action-item">
						<text class="iconfont icon-aixin2 text-grey margin-right-xs" :class="{active:actStatus.likes}"
							@click="handleAction('likes')"></text>
						<!-- form.likes -->
						{{data?.likes}}
					</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import type { Post } from '@/model/goods';

	// 跳转详情
	const handleTo = (id : string) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		})
	}
	// 跳转评论
	const handleToComents=(id : string)=>{
		uni.navigateTo({
			url: `/pages/coments/coments?id=${id}`
		})
	}
	const props = defineProps<{
		noAvatar ?: boolean,
		noAct ?: boolean
		data : Post

	}>()

	// 互动点击
	const actStatus = ref({
		favorites: false, // 收藏
		comments: false,  // 评论
		likes: false      // 点赞
	})
	
	// 子父通信emit
	type fieldType = 'favorites' | 'comments' | 'likes'
	const emit = defineEmits<{
		(e : 'update', field : fieldType, value : number) : void
	}>()
	// 点击上传
	const handleAction = (field : fieldType) => {
		actStatus.value[field] = !actStatus.value[field]
		const newValue = actStatus.value[field] ? props.data[field] + 1 : Math.max(0, props.data[field] - 1);
		console.log('newValue', newValue);
		emit('update', field, newValue)
	};
</script>

<style lang="scss">
	page {}


	.cuIcon-unfold {
		margin: 30upx 110upx 0 0;
	}

	.cuIcon-title {
		margin-left: 100upx;
	}

	/* 卡片列表容器 */
	.card-list {
		display: flex;
		padding: 16px;
		justify-content: center;
	}

	/* 单个卡片 */
	.card-item {
		flex-shrink: 0;
		width: 78%;
		height: auto;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}

	/* 卡片图片 */
	.card-image {
		width: 100%;
		max-height: 340upx;
		border-radius: 12px 12px 0 0;
		object-fit: cover;
	}

	/* 卡片内容区 */
	.card-content {
		padding: 24px;

		.card-text {
			font-size: 30upx;
			line-height: 1.3;
			max-height: 264upx;
			margin-bottom: 30upx;

			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow-y: hidden;

			color: transparent;
			background-image: linear-gradient(to bottom,
					rgba(30, 30, 30, 1) 90%,

					rgba(30, 30, 30, 0.3)98%);
			-webkit-background-clip: text;
			background-clip: text;
		}

		.card-author {
			font-size: 13px;
			color: #999;
			margin: 10px 0;
		}

		.card-tags {
			display: flex;
			gap: 8px;
			margin-bottom: 12px;

			.tag {
				font-size: 12px;
				color: #666;
				background-color: #f5f5f5;
				padding: 4px 8px;
				border-radius: 4px;
			}
		}

		.underline {
			height: 1upx;
			background-color: #ccc;

		}

		.card-actions {
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 26px;
			margin-bottom: -20upx;

			.action-item {
				display: flex;
				align-items: center;
				font-size: 15px;
				color: #999;

				.active {
					color: #ff2266;
				}
			}

		}
	}
</style>